<template>
  <div class="editor-demo-container">
    <RichEditor 
      v-model="content" 
      ref="editorRef" 
      placeholder="请输入内容..."
      class="editor"
    />
    
    <div class="action-buttons">
      <button @click="insertText" class="btn">插入文本</button>
      <button @click="getContent" class="btn">获取内容</button>
      <button @click="clearContent" class="btn btn-danger">清空内容</button>
    </div>
    
    <div class="preview-container">
      <h3>内容预览：</h3>
      <div class="preview" v-html="content"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed,onMounted } from 'vue'
// import { sanitize } from 'dompurify' // HTML净化库
import RichEditor from '@/components/QuillEditor.vue'

const content = ref('<p>初始内容</p>')
const editorRef = ref<{
  insertContent: (content: string) => void
  getContent: () => string
  setContent: (content: string) => void
  focus: () => void
  quillInstance?: any
}>()

// 安全的内容预览
// const safeContent = computed(() => sanitize(content.value))

const insertText = () => {
  try {
    // const safeText = sanitize('<strong>插入的文本</strong>')
    editorRef.value?.insertContent(content.value)
    editorRef.value?.focus() // 插入后保持焦点
  } catch (error) {
    console.error('插入内容失败:', error)
  }
}

const getContent = () => {
  try {
    const currentContent = editorRef.value?.getContent() || ''
    console.log('当前内容:', currentContent)
    alert(`内容长度: ${currentContent.length}字符`)
  } catch (error) {
    console.error('获取内容失败:', error)
  }
}

const clearContent = () => {
  editorRef.value?.setContent('')
  editorRef.value?.focus()
}
// 在组件中添加加载状态
const isEditorReady = ref(false);

</script>

<style scoped>
.editor-demo-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.editor {
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 20px;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.btn {
  padding: 8px 16px;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.btn:hover {
  background: #e0e0e0;
}

.btn-danger {
  color: white;
  background: #ff4d4f;
  border-color: #ff4d4f;
}

.btn-danger:hover {
  background: #ff7875;
}

.preview-container {
  margin-top: 30px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.preview {
  margin-top: 10px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #f9f9f9;
  min-height: 100px;
}

.preview :deep(*) {
  max-width: 100%; /* 防止内容溢出 */
}
</style>